<script setup>
import { ref,onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import requestUtil from "@/utils/request.js";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
let balance = ref(0);
let route = useRoute();
let router = useRouter();
let checked = ref([1]);
let totalPrice = window.sessionStorage.getItem("totalPrice")
  ? ref(window.sessionStorage.getItem("totalPrice"))
  : ref(0);
let load = async () => {
  let res = await requestUtil.post("/app/getUserInfo/", {
    userId: Cookies.get("userId")
  });
  balance.value = res.data.userInfo.balance;
};
onMounted(()=>{
  load();
})
const payment = async () => {
  console.log(balance.value, typeof Number(totalPrice.value));
  if (balance.value >= Number(totalPrice.value)) {
    let res = await requestUtil.post("/app/pay/", {
      userId: Cookies.get("userId"),
      totalPrice: Number(totalPrice.value),
      orderNumber: route.query.orderNumber,
      payType: checked.value
    });
    if (res.data.code === 200) {
      ElMessage.success("支付成功");
      router.push("/order");
    } else {
      ElMessage.error("支付失败,余额不足");
    }
  }
};
const onClickLeft = () => router.back();
</script>

<template>
  <div class="pay">
    <van-nav-bar title="支付" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="payprice">
      <span class="text">付款金额</span>
      <span class="price">￥{{ totalPrice }}</span>
    </div>
    <div class="payway">
      <div class="way">选择支付方式</div>
    </div>
    <div>
      <van-field name="radio">
        <template #input>
          <van-radio-group v-model="checked" direction="horizontal">
            <van-radio name="1">
              <div class="radio-item">
                <img src="@/assets/img/支付/余额.png" />
                <span>余额支付</span>
              </div>
            </van-radio>
            <van-radio name="2">
              <div class="radio-item">
                <img src="@/assets/img/支付/微信.png" />
                <span>微信支付</span>
              </div>
            </van-radio>
            <van-radio name="3">
              <div class="radio-item">
                <img src="@/assets/img/支付/支付宝.png" />
                <span>支付宝支付</span>
              </div>
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </div>
    <div class="btn">
      <button class="button" @click="payment">确认支付</button>
    </div>
  </div>
</template>

<style scoped>
.pay .payprice .price {
  color: red;
  position: relative;
  left: 280px;
  font-size: 34px;
}

.pay .payprice {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pay .payprice .text {
  font-size: 28px;
  color: #999999;
  position: absolute;
  left: 34px;
}

.pay .payway .way {
  background-color: #f7f7f7;
  font-size: 24px;
  padding: 20px 34px;
  color: #999999;
}

.van-radio {
  width: 100%;
  padding: 20px 0;
}

.radio-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio-item img {
  margin: 0 20px;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn .button {
  background-color: #ffba20;
  width: 700px;
  color: #ffffff;
  font-size: 32px;
  border: none;
  padding: 20px 0;
  margin-top: 60px;
}
</style>